<div ng-controller="UserAdminController">
    <div class="page-header">
        <h1>
            <msg key="userAdmin" />
        </h1>
    </div>
    <div class="row">
        <div class="toolbar pull-right">
            <button ng-click="initAdd()" class="btn btn-success">
                <span class="glyphicon glyphicon-plus"></span> <msg key="addUser"></msg> 
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-striped">
                <tr>
                    <th width="50px">#</th>
                    <th ng-click="orderBy('username')"><msg key="username" /> <span
                    ng-class="orderIcon('username')"></span></th>
                <th ng-click="orderBy('name')"><msg key="name" /> <span
                    ng-class="orderIcon('displayName')"></span></th>
                <th ng-click="orderBy('role')"><msg key="role" /> <span
                    ng-class="orderIcon('role')"></span></th>
                <th><msg key="actions" /></th>
                </tr>
                <tr ng-repeat="u in users|orderBy:order">
                    <td>{{$index + 1}}</td>
                    <td>
                        <div class="text-left">{{u.username}}</div>
                    </td>
                    <td>{{u.name}}</td>
                    <td>{{u.role}}</td>
                    <td><a ng-click="delete($index)"><span
                                class="glyphicon glyphicon-trash"></span></a></td>
                </tr>
            </table>
        </div>
    </div>
    <pagination boundary-links="true" total-items="totalItems" items-per-page="10" ng-model="p" ng-change="search()" class="pagination" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>

    <div class="modal fade" id="userDialog" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">
                        <msg key="addUser"></msg>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3" for="username"><msg
                                    key="username"></msg></label>
                            <div class="col-md-6">
                                <input class="form-control" id="username"
                                       ng-model="user.username" ng-required="true" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="control-label col-md-3"><msg
                                    key="password"></msg></label>
                            <div class="col-md-6">
                                <input class="form-control" type="password" id="password"
                                       ng-model="user.password" ng-required="true" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3" for="name"><msg
                                    key="name"></msg></label>
                            <div class="col-md-6">
                                <input class="form-control" type="text" id="name"
                                       ng-model="user.name" ng-required="true" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3" for="role"><msg
                                    key="role"></msg></label>
                            <div class="col-md-6">
                                <select class="form-control" id="role"
                                        ng-options="c for c in roleOpts" ng-model="user.role"
                                        ng-required="true" ></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" ng-click="save()" class="btn btn-primary">
                        <msg key="save"></msg>
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <msg key="cancel"></msg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
